@extends("admin.layout.main")
@section("content")
    <div id="app" >
        {{--按钮栏--}}
        <Row type="flex"  align="middle">
            <i-col span="35" style="margin: 20px ;">
                <span style="font-size: 16px" >
                    &nbsp;&nbsp;请输入您要转换的文字:
                   <i-input id="text" type="textarea" :rows="8" style="width: 800px"  v-model="text"></i-input>
                    <span style="font-size: 16px">
                        字数： <span v-if="codeNum > 30" style="color:red">@{{ codeNum }} </span>
                        <span v-else style="color:green">@{{ codeNum }} </span> / 30
                        <i-button type="primary" @click="tapCopy('text')">一键复制</i-button>
                    </span>
                </span>

            </i-col>
        </Row>


    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    text:'',
                    codeNum:0,
                    color:'green'
                };
            },
            mounted(){
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {

                exchange(s){
                    s = s.replace(/([\u4E00-\u9FA5]|^|\n|\r)([\,\.\?\!\:])(?=[\u4E00-\u9FA5]|$|\n|\r)/g,function(u,v,w,x) {
                        sign = {
                            ',': '，',
                            '.': '。',
                            '?': '？',
                            '!': '！',
                            ':':'：',
                        };
                        return sign[w] ? v + sign[w] : u;
                    });

                    s   =  s.replace(/\s+/g,'');
                    s   =  s.replace(/"([^"]*)"/g ,"“$1”");
                    return s;
                },
                tapCopy($id){
                    this.selectText($id);
                    document.execCommand('copy');
                    this.$Message.success('复制成功');
                },
                selectText(element){
                    var text = document.getElementById(element);
                    //做下兼容
                    if (document.body.createTextRange) {  //如果支持
                        var range = document.body.createTextRange(); //获取range
                        range.moveToElementText(text); //光标移上去
                        range.select();  //选择
                    } else if (window.getSelection) {
                        var selection = window.getSelection(); //获取selection
                        var range = document.createRange(); //创建range
                        range.selectNodeContents(text);  //选择节点内容
                        selection.removeAllRanges(); //移除所有range
                        selection.addRange(range);  //添加range
                        /*if(selection.setBaseAndExtent){
                         selection.setBaseAndExtent(text, 0, text, 1);
                         }*/
                    } else {
                        this.$Message.error("复制失败");
                    }
                },

            },
            watch:{
                text:function(val) {
                    console.log(val);
                    let str    =   this.exchange(val);
                    console.log(str);
                    this.text   =   str;
                    this.codeNum    =   str.length;
                    if(str.length > 30){
                        this.color = 'red';
                    }

                },
            }


        });

    </script>
@endsection